{literal}
<script type="text/javascript">
	$(document).ready(function() {
		$('#hora').mask('00:00');
		$('#horarioForm').bootstrapValidator({
			fields : {
				precio : {
					validators : {
						digits : {
							message : 'El precio solo pueden ser numeros'
						},
						notEmpty : {
							message : 'Ingrese un precio por favor'
						}
					}
				},
				hora : {
					validators : {
						notEmpty : {
							message : 'Ingrese la hora por favor'
						}
					}
				},
				capacidad : {
					validators : {
						digits : {
							message : 'El precio solo pueden ser numeros'
						},
						notEmpty : {
							message : 'Ingrese la capacidad por favor'
						}
					}
				},
				duracion : {
					validators : {
						notEmpty : {
							message : 'Ingrese una duracion por favor'
						}
					}
				}
				
			}
		});
		$("#nuevaBtn").click(
				function() {
					$('#modalLabel').html('Nuevo Horario');
					$('#accion').val("alta");
					$('#idHorario').val("");
					$('#duracion').val("60");
					$('#hora').val("");
					$('#capacidad').val("15");
					$('#activo').prop('checked', true);
					$('#activoFeriado').prop('checked', false);
					$('#horarioModal').modal();
					$("#idHorarioDiv").hide();
				    	
				});

$("#deleteBtn").click(
	function() {
		var id = $("#idHorario").val();
		// Returns successful data submission message when the entered information is stored in database.
		var dataString = 'idHorario=' + id;
//					+ '&accion=' + accion;
		$.ajax({
			type : "POST",
			url : "horario.php?operacion=delete",
			data : dataString,
			cache : false,
			success : function(result) {
				var deleteHorarioJson = jQuery.parseJSON( result );
				$("#tablaa").bootstrapTable('remove', {
		            field: 'id',
		            values: id
		        });
				$('#deleteModal').modal('toggle');

			}
		});
		return false;
	});


$.ajax({
type : "POST",
url : "horario.php?operacion=getDias",
cache : false,
success : function(result) {
var diasJson = jQuery.parseJSON( result );
var options="";

$.each(diasJson, function(idx, obj) {
options+= "<option value='" + obj.id +"'>" +obj.nombre  +"</option>"
diasMap[obj.id] = obj.nombre;
});
$('#diaSelect').html(options);
}
});

$.ajax({
type : "POST",
url : "profesor.php?operacion=getProfes",
cache : false,
success : function(result) {
var profeJson = jQuery.parseJSON( result );
var options="";
$.each(profeJson, function(idx, obj) {
options+= "<option value='" + obj.id +"'>" +obj.nombre  +"</option>"
profesMap[obj.id] = obj.nombre;
});
$('#profeSelect').html(options);
}
});	
$('#tablaa').bootstrapTable('refresh',{
    url:"horario.php?operacion=getAll"
 });


$("#confirmar").click(
	function() {
		
		$('#horarioForm')
		.data('bootstrapValidator').validate();
		if(!$('#horarioForm')
				.data('bootstrapValidator').isValid()){
			return;
		}
		
		var id = $("#idHorario").val();
		var duracion = $("#duracion").val();
		var hora = $("#hora").val();
		var capacidad = $("#capacidad").val();
		var profeId = $("#profeSelect").val();
		var diaId = $("#diaSelect").val();
		var accion = $("#accion").val();
		var activo = $("#activo").prop( "checked" );
		var activoFeriado = $("#activoFeriado").prop( "checked" );
		
		
		// Returns successful data submission message when the entered information is stored in database.
		var dataString = 'idHorario=' + id + '&duracion='
				+ duracion + '&hora=' + hora
				+ '&capacidad=' + capacidad
				+ '&profeId=' + profeId
				+ '&diaId=' + diaId
				+ '&activo=' + activo
				+ '&activoFeriado=' + activoFeriado;
//					+ '&accion=' + accion;

	
		$.ajax({
			type : "POST",
			url : "horario.php?operacion="+accion,
			data : dataString,
			cache : false,
			success : function(result) {
				var newHorarioJson = jQuery.parseJSON( result );
				if(accion == 'alta'){
					$("#tablaa").bootstrapTable('insertRow', {
			            index: 0,
			            row: newHorarioJson
			        });
				}else{
					$("#tablaa").bootstrapTable('updateRow', {
			            index: indice,
			            row: newHorarioJson
			        });
				}
				$('#horarioModal').modal('toggle');
				

			}
		});
		return false;
	});

	
	
	
	});

var diasMap = {};
var profesMap = {};

function editar(id){
	$('#modalLabel').html('Editar horario Nro ' + id );
	var dataString = 'idHorario=' + id;	
		$.ajax({
		type : "POST",
		url : "horario.php?operacion=getById",
		data : dataString,
		cache : false,
		success : function(result) {
			var horarioJson = jQuery.parseJSON( result );
			$('#accion').val("update");
			$('#idHorario').val(horarioJson.id);
			$('#duracion').val(horarioJson.duracion);
			$('#hora').val(horarioJson.hora);
			$('#precio').val(horarioJson.precio);
			$('#diaSelect').val(horarioJson.dia);
			$('#profeSelect').val(horarioJson.profesor);
			if(horarioJson.activo === 'S'){
				$('#activo').prop('checked', true);
			}else{
				$('#activo').prop('checked', false);
			}
			if(horarioJson.activoFeriado === 'S'){
				$('#activoFeriado').prop('checked', true);
			}else{
				$('#activoFeriado').prop('checked', false);
			}
			$("#idHorarioDiv").show();
		}
		});
			
		$('#horarioModal').modal("show");	
}

function eliminar(id){
	$('#idDelete').html(id);
	$('#idHorario').val(id);
	$('#deleteModal').modal("show");	
}





$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});


function profesFormatter(value) {
    return profesMap[value];
}
function diasFormatter(value) {
    return diasMap[value];
}

function operateFormatter(value, row, index) {
    return [
        '<a class="edit" href="javascript:void(0)" title="Editar">',
        '<i class="glyphicon glyphicon-edit"></i>',
        '</a>  ',
        '<a class="remove" href="javascript:void(0)" title="Eliminar">',
        '<i class="glyphicon glyphicon-remove"></i>',
        '</a>'
    ].join('');
}
window.operateEvents = {
    'click .edit': function (e, value, row, index) {
    	indice = index;
        editar(row.id);
    },
    'click .remove': function (e, value, row, index) {
        eliminar(row.id);
    }
};
</script>

{/literal}



    <div id="toolbar">
			<button id=nuevaBtn type="button" class="btn btn-primary">Nuevo
				horario</button>        
    </div>
<table 
       id="tablaa" 
	   data-toggle="table"
       data-toolbar="#toolbar"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-height="700"
       data-search="true"
       class="table table-striped">
    <thead>
    <tr>
        <th data-field="id" data-sortable="true" data-align="center">ID</th>
        <th data-field="dia" data-formatter="diasFormatter" data-sortable="true" data-align="center">D&iacute;a</th>
        <th data-field="hora" data-sortable="true" data-align="center">Hora</th>
        <th data-field="profesor" data-formatter="profesFormatter" data-sortable="true" data-align="center">Profesor</th>
        <th data-field="duracion" data-align="center">Duracion</th>
        <th data-field="capacidad" data-align="center">Capacidad</th>
        <th data-field="activo" data-formatter="siNoFormatter" data-align="center">Activo</th>
        <th data-field="activoFeriado" data-formatter="siNoFormatter" data-align="center">Activo en feriado</th>
        <th data-formatter="operateFormatter" data-events="operateEvents" data-align="center"></th>
    </tr>
    </thead>
</table>



<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="1" role="dialog"
	aria-labelledby="deleteModalLabelled" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Eliminar...</h4>
			</div>
			<div class="modal-body">
				Esta seguro que desea eliminar el horario nro <span id="idDelete"></span>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				<button type="button" class="btn btn-danger" id="deleteBtn">Eliminar</button>
			</div>
		</div>
	</div>
</div>
<!-- Modal -->
<div class="modal fade" id="horarioModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="modalLabel"></h4>
			</div>
			<div class="modal-body">


				<form role="form" action="horario.php" id="horarioForm"
					method="post">

					<input type="hidden" id="accion" name="accion">
					<div class="form-group" id="idHorarioDiv" style="display: none;">
						<label for="idHorario">ID</label> <input type="text"
							class="form-control" id="idHorario" name="idHorario" disabled>
					</div>

					<div class="form-group">
						<label for="diaSelect">D&iacute;a</label> <select
							class="form-control" id="diaSelect" name="diaSelect"><option
								value="0">Elige un d&iacute;a</option></select>
					</div>

					<div class="form-group">
						<label for="profeSelect">Profesor</label> <select
							class="form-control" id="profeSelect" name="profeSelect"><option
								value="0">Elige un profesor</option></select>
					</div>

					<div class="form-group">
						<label for="duracion">Duraci&oacute;n</label> <input type="text"
							class="form-control" id="duracion" name="duracion"
							placeholder="Ingrese la duraci&oacute;n">
					</div>
					<div class="form-group">
						<label for="hora">Hora</label> <input type="text"
							class="form-control" id="hora" name="hora"
							placeholder="ingrese una hora" data-mask="00:00"
							data-mask-reverse="true">
					</div>
					<div class="form-group">
						<label for="hora">Capacidad</label> <input type="text"
							class="form-control" id="capacidad" name="capacidad"
							placeholder="ingrese una capacidad" value="15">
					</div>
					<div class="form-group" style="padding-bottom: 10px;">
						<label for="activo" class="col-lg-5 control-label"
							style="padding-left: 3px;">Activo</label>
						<div class="col-lg-5">
							<input type="checkbox" id="activo" name="activo">
						</div>
					</div>

					<div class="form-group" style="padding-bottom: 10px;">
						<label for="activoFeriado" class="col-lg-5 control-label"
							style="padding-left: 3px;">Activo en feriado</label>
						<div class="col-lg-5">
							<input type="checkbox" id="activoFeriado" name="activoFeriado">
						</div>
					</div>

				</form>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
					<button type="button" class="btn btn-primary" id="confirmar">Confirmar</button>
				</div>
			</div>
		</div>
	</div>